<template>
	<div class="config-content">
		<p class="text-title">各区内{{ title }}</p>
		<div class="card-content">
			<el-table :data="tableConfig.data" height="250" style="width: 100%" table-layout="fixed" :flexible="false" @row-click="handleRowClick">
				<el-table-column v-for="(item, index) in tableConfig.columns" :key="index" :prop="item.prop" :label="item.label" width="180">
					<template v-slot:default="{ row }">
						<p :style="{ color: row[item.prop] ? item.color : '' }">
							<span>{{ row[item.prop]||0 }}</span>
							<!-- <span v-if="item.unit">{{ item.unit }}</span> -->
						</p>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<el-dialog v-model="visible" append-to-body :title="dialogTitle" width="60%">
			<el-table :data="nextTableData" v-if="visible" height="380" style="width: 100%" table-layout="fixed" :flexible="false">
				<el-table-column v-for="(item, index) in tableConfig.columns" :key="index" :prop="item.prop" :label="item.label" width="180">
          <template v-slot:default="{ row }">
						<p :style="{ color: row[item.prop] ? item.color : '' }">
							<span>{{ row[item.prop] }}</span>
							<!-- <span v-if="item.unit">{{ item.unit }}</span> -->
						</p>
					</template>
				</el-table-column>
			</el-table>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import { useConfig } from '@/hooks/useCrudHooks'

const { getAreaLevel } = useConfig()

const props = withDefaults(
	defineProps<{
		unit?: string
		title: string
		code: string
		api: string
		paramsObj?: any
		propLabel: string
		fieldFlag?: string
		areaStr: any
	}>(),
	{
		unit: '人',
	}
)
const visible = ref(false)
const dialogTitle = ref('')
const tableConfig: any = ref({
	height: 200,
	showIndex: false,
	columns: [],
})

const areaLevelObj: any = getAreaLevel()
const loading = ref(false)
const nextTableData = ref([])
const getInitData = async () => {
	loading.value = true
	const { data } = await apiMod.getDictItemList(props.code)
	tableConfig.value.columns = data[props.code]
		.map((item) => {
			if (item.label !== '暂无') {
				return {
					label: item.label,
					prop: item.label,
					isHtml: true,
					color: '#0052D9',
					unit: `(${props.unit})`,
				}
			}
		})
		.filter(Boolean)
	tableConfig.value.columns.unshift({
		label: '区域',
		prop: 'areaName',
		width: 150,
	})
	tableConfig.value.columns.push({
		label: '共计',
		prop: '共计',
	})

	let query = {
		groupByFlag: areaLevelObj.areaLevel,
    fieldFlag:props.fieldFlag
	}
	query[props.propLabel] = {
		...props.paramsObj,
	}
	apiMod[props.api](query).then((res) => {
		tableConfig.value.data = res.data
			.map((row) => {
				row.areaName = row['区域'] || row['养老机构'] || row['养老机构名称']
				return row
			})
			.filter((item) => item.areaName !== '市辖区')

		loading.value = false
	})
}

const handleRowClick = (row) => {
	dialogTitle.value = `${row['区域'] || row['养老机构'] || row['养老机构名称']} ${props.title}`
	let query = {
		groupByFlag: areaLevelObj.nextAreaLevel || 'org',
    fieldFlag:props.fieldFlag,
		region: row.region
	}
  if(query.groupByFlag == 'org') {
    query.region = undefined
  }
	query[props.propLabel] = {
		...props.paramsObj,
	}
  
  if(areaLevelObj.areaLevel == 'org') {
   return
  }

	query[props.propLabel][props.areaStr[areaLevelObj.areaLen.length]] = row.region
	apiMod[props.api](query).then((res) => {
		visible.value = true
		nextTableData.value = res.data.map((row) => {
				row.areaName = row['区域'] || row['养老机构'] || row['养老机构名称']
				return row
			})
			.filter((item) => item.areaName !== '市辖区')
	})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped>
.config-content {
  width:100%;
}
.text-title {
	font-family: 'Microsoft YaHei Bold';
	font-weight: 700;
	font-size: 16px;
	text-align: left;
	color: #1c1c28;
	padding-bottom: 11px;
}
.card-content {
	width: 100%;
	padding: 34px;
	border-radius: 10px;
	background: #fff;
}
</style>
